<div>
  <p>Patients Schema</p>
</div>


<div class="row">
  <div class="col-md-12" style="margin-top: 14px">
    <div class="col-md-9" style="padding-left: 0px">
      <span id="questionlabel" style="padding-right: 5px" for="text-input-question"><span>Question</span>:</span>
      <input id="text-input-question" style="width:300px; height: 32px;" type="text" pInputText
             [(ngModel)]="filter" (keyup.enter)="searchPatientsResultsMock()">
      <button #filterButton id="filterButtonId" class="btn btn-primary pull-right" style="width:200px; margin-left: 10px;"
              (click)="searchPatientsResultsMock()">Submit
      </button>
    </div>
  </div>
</div>


<div class="card" style="margin-top: 3em;">
 <div class="card-block">
   <p-panel #dtpanel>
     <p-table id="patientsDataTable" [value]="patients" [rows]="10" #dt>
       <ng-template pTemplate="caption">
         <div class="tableCaption">
           <span>Patients Data</span>
         </div>
       </ng-template>
       <ng-template pTemplate="emptymessage">
         <tr>
           <td [attr.colspan]="7">
             <span>No data found.</span>
           </td>
         </tr>
       </ng-template>
       <ng-template pTemplate="header">
         <tr>
           <th style="width: 100%;">
             <span>Id</span>
           </th>
           <th style="width: 100%;">
             <span>First Name</span>
           </th>
           <th style="width: 100%;">
             <span>Last Name</span>
           </th>
           <th style="width: 100%;">
             <span>Diagnosis</span>
           </th>
           <th style="width: 100%;">
             <span>Gender</span>
           </th>
           <th style="width: 100%;">
             <span>Length Of Stay</span>
           </th>
           <th style="width: 100%;">
             <span>Age</span>
           </th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-rowData>
         <tr>
           <td>
             <span>{{rowData.id}}</span>
           </td>
           <td>
             <span>{{rowData.first_name}}</span>
           </td>
           <td>
             <span>{{rowData.last_name}}</span>
           </td>
           <td>
             <span>{{rowData.diagnosis}}</span>
           </td>
           <td>
             <span>{{rowData.gender}}</span>
           </td>
           <td>
             <span>{{rowData.length_of_stay}}</span>
           </td>
           <td>
             <span>{{rowData.age}}</span>
           </td>
         </tr>
       </ng-template>
     </p-table>
   </p-panel>
 </div>
</div>

<div>
  <p>SQL Response from preprocessor: {{sqlResponsePreprocessor}}</p>
</div>

<div>
  <p>SQL Response from seq2seq translator: {{translatedSqlResponse}}</p>
</div>

<div>
  <p>Final SQL Response: {{sqlResponse}}</p>
</div>



